<template>
    <div>
        <h1>日志信息</h1>
        <table border="1" style="width :1000px ; text-align:center">
            <thead>
                <tr>
                    <th>日志内容</th>
                    <th>日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user,index) in dateList" :key="user.dateId">
                    <td>{{user.userAccount}}</td>
                    <td>{{user.date}}</td>
                </tr>
            </tbody>
        </table>

        <div style="text-align:center" v-if="box">
            <input type="button" value="<" @click="reduce()">
            <input type="button" value=">" @click="increase()">
        </div>

        <div style="text-align:center" v-if="box2">
            <input type="button" value="<2" @click="reduce2()">
            <input type="button" value=">2" @click="increase2()">
        </div>

        <div>
            <fieldset>
                <legend>查询日志信息</legend>
                用户名：<input type="date" name="sDate" id="sDate"><br>
                密码：<input type="date" name="eDate" id="eDate"><br>
                <input type="button" value="查找" @click="select()">
            </fieldset>
        </div>

 
    </div>
</template>

<script>
export default {
    data() {
        return {
            dateList: [],
            userAccount: "",
            userDate: "",
            pageNO: 1,
            sDate: "",
            eDate: "",
            box:true,
            box2:false
        }
    },
    methods: {
        async getDate(pageNO) {
            let paramObj = { pageNO: this.pageNO }
            let cutObj = await this.ajax.getSubmit("/api/users/selectAllDate", paramObj)
            this.dateList = cutObj.list;
            this.userAccount = cutObj.userAccount;
            this.userDate = cutObj.date
        },
        increase() {
            this.pageNO++
            this.getDate(this.pageNO)
        },
        reduce() {
            this.pageNO--
            this.getDate(this.pageNO)
        },

        increase2() {
            this.pageNO++
            this.select(this.pageNO)
        },
        reduce2() {
            this.pageNO--
            this.select(this.pageNO)
        },

        async select() {
           this. box2=true;
           this. box=false;
            var sDate = document.getElementById("sDate").value;
            this.sDate = sDate

            var eDate = document.getElementById("eDate").value;
            this.eDate = eDate

            let paramObj = {pageNO: this.pageNO, sDate: this.sDate, eDate: this.eDate }
            let cutObj = await this.ajax.getSubmit("/api/users/selectDateByDate", paramObj)
            this.dateList = cutObj.list;
            this.userAccount = cutObj.userAccount;
            this.userDate = cutObj.date
        }
    },

    created() {// 页面被创建时调用的函数 和data，computed，methods同级
        this.getDate(1)
    }
}
</script>

<style>

</style>